<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import common_util from "../../util/common_util.js";
import axios from "axios";
axios.defaults.withCredentials = true
const router = useRouter();
const user = ref({
  userId: "",
  password: ""
})

function login() {
  axios.post("/api/login", {
    userId: user.value.userId,
    password: user.value.password
  }).then(res => {
    if (res.data.code === 0) {
      ElMessage({ message: "登录成功", type: "success" })
      common_util.storeAccessToken(res.data.token)
      router.push("/rent/show")
    } else {
      ElMessage({ message: res.data.msg, type: "error" })
    }
  })
}
</script>

<template>
  <div class="accountContainer">
    <el-form class="form-card" :model="user" @submit.prevent="login()">
      <div class="table-title1">LOGIN</div>
      <el-form-item label="用户ID" label-position="left" label-width="130px" prop="userId">
        <el-input v-model="user.userId" class="form-input" placeholder="用户ID" required>
        </el-input>
      </el-form-item>
      <el-form-item label="密码" label-position="left" label-width="130px" prop="password">
        <el-input v-model="user.password" type="password" class="form-input" placeholder="密码" show-password
          required></el-input>
      </el-form-item>
      <el-button type="primary" class="submit-btn" @click="login()">Login</el-button>
      <div class="link-container">
        <router-link to="/welcome/register" class="link-item">Register</router-link>
      </div>
    </el-form>
  </div>
</template>

<style scoped>
.form-card {
  width: 450px;
  padding: 40px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.table-title1 {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
  text-align: center;
  margin-bottom: 30px;
}

.form-input {
  width: 100%;
}

.submit-btn {
  width: 100%;
  margin-top: 20px;
  height: 45px;
  font-size: 16px;
}

.link-container {
  margin-top: 20px;
  text-align: center;
}

.link-item {
  color: #409EFF;
  text-decoration: none;
  font-size: 14px;
}

.link-item:hover {
  text-decoration: underline;
}
</style>